<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" style="border: solid 1px #000;" width="100" height="100"></canvas>
    <script>

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        //画矩形 
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 5;
        ctx.fillStyle = 'blue';
        ctx.rect(50,50,200,100);
        ctx.stroke();
        ctx.fill();

        // setTimeout(function(){
        //     ctx.clearRect(0,0,500,500);
        // },2000);

        //画三角形
        ctx.lineJoin = 'round';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(50,250);
        ctx.lineTo(50,300);
        ctx.lineTo(100,250);
        ctx.closePath();
        ctx.stroke();


        //画圆
        ctx.beginPath();

        ctx.fillStyle = 'yellow';
        ctx.arc(250,250,50,0,Math.PI*2);
        ctx.stroke();
        ctx.fill();
        ctx.closePath();


     

        //图片

         var img = new Image();
         img.src = '1.jpg';

         img.onload = function(){
             
            ctx.drawImage(img,0,0,canvas.width,canvas.height);

            //文本
        ctx.fillStyle = 'red';
        ctx.font = 'bold 40px Arial'
        ctx.fillText("@小狗狗",20,canvas.height-20);

         var dataURL=canvas.toDataURL('image/jpeg'); 

         console.log("dataURL",dataURL);

            
         }
        
        

            


    </script>
</body>
</html>